Graphical Java Lesson 1-12: Scrollin' on the River 


Right now, our world looks rather plain, with its light gray background. There's no background scenery: 
just Mario, the Goombas, and some colored rectangles (the platforms and death zones). In Super Mario 
Bros., different levels have skies of different colors. The worlds are also decorated with hills, trees, 
clouds, and all sorts of other objects that don't affect the gameplay, but which make the game look a lot 
less boring. 


Our world is a mere 600 pixels wide and 400 pixels high: the size of the content pane of our program's 
main window. Super Mario Bros. is known for having levels that scroll smoothly over thousands of 
pixels of land (or water). Mario must travel a long way, to save Princess Toadstool. 


First, let's change our world's background color. Go to your Content Pane. java source file. 
Changing the background color is VERY simple: just draw a colored rectangle the size of the content 
pane in the content pane, before you draw anything else. Insert the following code at the beginning of 
the paintComponent method of your ContentPane class: 


g.setColor(Color.GREEN) ; 
g.fillRect(0, 0, 
WalkingMario.WINDOW WIDTH, WalkingMario.WINDOW HEIGHT) ; 


The first line will set the background color to green. The second line will draw the background: a green 
rectangle that will fill the content pane. Run your program. On second thought, I don't like this green 
background. Let's change the background color from green to a custom shade of light blue, by 
changing ... 


g.setColor (Color.GREEN) ; 
.. to: 


g.setColor(new Color(191, 255, 255)); 


That looks nicer, doesn't it? Feel free to change it to something different, if you want. Now, let's make 
our world look more interesting, by adding some background scenery. Before we do this, we need a 
picture of some things that appear in the backgrounds of the worlds of Super Mario Bros. Open your 
web browser, and go to http://www.mariouniverse.com/images/sprites/nes/smb/misc-2.gif. Again, let's 
save this picture in our "images" folder, with our other two images. Go to the location on your 
computer where NetBeans stores all of your projects. Then, go to the "Walking Mario" folder. From 
there, go to the "build" folder, then "classes", then "walking", and then "mario". Finally, open your 
"images" folder. Save the picture of the hills, pipes, etc. in this folder. Help students with this task. if 
You can now close your browser, and go back to NetBeans. 


Now that we have our new image, let's load it into memory. Go to your WalkingMario.java 
source file. Add the following declaration to your list of global variables: 


public static Image back _img; 


We'll load it into memory the same way we loaded the other two into memory. In your main method, 
right after this try-with-resources statement ... 


try (InputStream enemies file = 
WalkingMario.class.getResourceAsStream("images/enemies.png") ) 


{ 


enemies img = ImagelO.read(enemies file); 


} 


... add the following try-with-resources statement: 


try (InputStream back file = 
WalkingMario.class.getResourceAsStream("images/misc-2.gif") ) 


{ 
back_img = ImagelIO.read(back file); 


} 


Let's create a new class: BackgroundObject. An object of this type will store information about a 
background object on the screen. After you have created the BackgroundObject class, go to your 
BackgroundObject. java source file. First, add the following member variables to your 
BackgroundObject class: 


private Image src_img; 
private Rectangle src rect; 
private Rectangle my rect; 


Then, import the Image and Rectangle classes, with the following import statements: 


import java.awt 
import java.awt 


. Image; 
.Rectangle; 
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A background object will have a source image (where we'll get the object's pixels from), a source 
rectangle (the rectangular region of the source image that will be displayed on the screen), and a 
destination rectangle (where the object's pixels will be displayed on the screen). We'll use src_ img to 
store the object's source image, src_ rect to store its source rectangle, and my rect to store its 
destination rectangle. 


Now, let's add a simple constructor to our BackgroundObject class: 


public BackgroundObject (Image src, Rectangle sr, Rectangle dr) 
{ 

src img = sro; 

srce_rect = sr; 

ny £ectl = ar; 


} 


Finally, let's give our BackgroundObject class a draw method: 


public void draw(Graphics g) 
{ 
g.drawIlmage(src_img, my rect.x, my rect.y, 
my rect.x + my rect.width, my rect.y + my_rect.height, 
SO reo. My SHO PeCl. Vp SEC Trecl.= + Src. rect.width, 
Seo Trecl.y + Sree rect nei gn, moll); 


} 
Import the Graphics class, with the following import statement: 


import java.awt.Graphics; 


As you can see, this is a very simple class. Background objects are very simple things: they just exist in 
memory, and get drawn on the screen. No animation, collision-detection, etc. Let's add some 
background objects to our world. Go to your WalkingMario. java source file. We'll make our 
world able to contain any number of background objects, so add the following declaration to your list 
of global variables: 


public static ArrayList<BackgroundObject> back objs; 
In your main method, right after the lines that create our world's death zones, like ... 


death _zones.add(new DeathZone (new Rectangle(400, 200, 20, 20), 
Color.RED) ); 


... let's initialize our ArrayList, back objs: 
back objs = new ArrayList<>(); 


For our first background object, let's put a tree on the cyan platform. Our tree will look like: 


? 


This green tree is located in images/misc-2.gif, which we have stored in the variable, 

back _img. In images/misc-2.gif, the tree has a top-left corner of (63, 47). The tree is 16 pixels 
wide and 46 pixels high. To position it on the cyan platform, we'll start drawing it at (120, 164), on the 
screen. After the line that initializes back _objs (above), add the following line of code: 


back_objs.add(new BackgroundObject (back img, 
new Rectangle(63, 47, 16, 46), new Rectangle(120, 164, 16, 46))); 


The first argument we pass to the constructor of our new background object is its source image, the 
second argument is its source rectangle, and the third one is its destination rectangle. 


Let's create another background object: a hill on the black platform. Our hill will look like: 
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This hill is also located in images/misc-2.gif, which is stored in back img. In 
images/misc-2.gif, the hill has a top-left corner of (86, 5). The hill is 80 pixels wide and 35 
pixels high. To position it on the black platform, we'll start drawing it at (60, 355), on the screen. The 
following line of code will create our hill: 


back_objs.add(new BackgroundObject (back img, 
new Rectangle(86, 5, 80, 35), 
new Rectangle (60, WINDOW_HEIGHT - 45, 80, 35))); 


The y-coordinate of the top of the black platform is 390 (WINDOW HEIGHT - 10). We want the 
bottom of our hill (35 pixels high) to just touch the top of the black platform. Therefore, we'll set the y- 
coordinate of the top of our hill's destination rectangle to 390 — 35 = 355 

( (WINDOW HEIGHT - 10) - 35, which simplifies to WINDOW HEIGHT - 4 5). 


Now, let's draw our tree and our hill. Go to your Content Pane. java source file. We'll draw our 
background objects in front of the background rectangle, but behind our death zones. In the 
paintComponent method of your Content Pane class, after ... 


g.setColor(new Color(191, 255, 255)); 
g.fillRect(0, 0, 
WalkingMario.WINDOW WIDTH, WalkingMario.WINDOW HEIGHT) ; 


... and before ... 


for (ant 1.=— 0; i < WalkingMario.death Zones.size(); 1 = 1+ 1) 
WalkingMario.death_zones.get (i) .draw(g) ; 


... insert the following for loop: 


for (int 1 = 07; 41. < WalkingMario.back ob] S.size(); 2 = 1-+ J) 
WalkingMario.back objs.get(i).draw(g); 


Run your program. If you have done everything right, so far, it should look like: 


Walking Mario 


If Mario or a Goomba walks in front of a background object, that character should appear to be in front 
of that object. Try making some more background scenery, to make this world look more 
interesting. What happens if you use mario_img or enemies _img as your source images? 
What happens if you make the source and destination rectangles of a background object different 
sizes, rather than the exact same size? 


Our 600 x 400 pixel world is confining, compared to a level of Super Mario Bros. Making our main 
window bigger would not do much to change this, because you can only make a window so big. Games 
that scroll contain more interesting worlds: you get a sense that you're moving through a big world, and 
you can be surprised by parts of the world you've never seen before, if you haven't yet made it that far. 
We're going to add scrolling to our game. 


Smooth scrolling is simpler than you might think! On each tick of the timer, we need to figure out 
which part of our world to display. We want to display the part of the world that contains Mario, since 
he is our player character. We can model this as a "camera" that tracks Mario's location, and captures a 
rectangular region of the world surrounding him, on each tick of the timer. When Mario moves, the 
camera will move with him. 


Create a new class: Camera. An object of this type will store information about the camera described 
above. After you have created the Camera class, go to your Camera. java source file. Add the 
following member variable to your Camera class: 


private Rectangle my view; 

Import the Rectangle class, with the following import statement: 

import java.awt.Rectangle; 

We'll use my_view to store the rectangular region that will be visible, when we repaint the screen. 
We'll call this rectangular region our camera's viewing area. On each tick of the timer, we'll update 
my view, to keep up with Mario. Add the following constructor to your Camera class: 

public Camera () 

{ 


my view = new Rectangle(0, 0, 
WalkingMario.WINDOW WIDTH, WalkingMario.WINDOW HEIGHT) ; 


Our viewing area will always be 600 pixels wide and 400 pixels high. It won't matter where we initially 
place our camera, though, because on the first tick of the timer, we'll center our viewing area around 
Mario's location, wherever that is. To center our viewing area around Mario, we'll: 


* Get Mario's rectangle. 

¢ Find the center of his rectangle (a point). We'll call it C. 

* Place the left side of our viewing area half a screen width to the left of C. 
* Place the top of our viewing area half a screen height above C. 


How do we find the center of Mario's rectangle? Start at his top-left corner. Move right by half of his 
width, and move down by half of his height. Go to your Mario.4java source file, and add the 
following convenience method to your Mario class: 


public Point myCenter () 
half width = my_rect.width / 2; 


int half height = my rect.height / 2; 
Lum. new Point (my fect. + halt width, my rect.y + halt height) >; 


Import the Point class, with the following import statement: 


import java.awt.Point; 


Now, go back to your Camera. java source file. We're going to add a method to our Camera class: 
setViewingArea. Unlike many of our other classes, this one won't have a draw method. You don't 
really draw a camera; you POSITION it, and then draw the world's objects relative to its position. Add 
the following method to your Camera class: 


public void setViewingArea () 


: 


Point c_mario = WalkingMario.mario.myCenter (); 


my view.x = c mario.x - WalkingMario.WINDOW WIDTH / 2; 
my view.y = c mario.y - WalkingMario.WINDOW HEIGHT / 2; 
} 


Again, import the Point class, with the following import statement: 
import java.awt.Point; 


As you can see, we don't touch the width and height of our viewing area, which we set in the 
constructor. Finally, add the following accessor method to your Camera class: 


public Rectangle viewingArea () 


{ 


return my view; 


} 


Now, we're going to add a camera to our world. Go to your WalkingMario.java source file. Add 
the following declaration to your list of global variables: 


public static Camera cam; 
In your main method, right after the lines that create our world's background objects, like ... 
back_objs.add(new BackgroundObject (back img, 


new Rectangle(86, 5, 80, 35), 
new Rectangle (60, WINDOW_HEIGHT - 45, 80, 35))); 


... let's set up our camera, with the following line of code: 
cam = new Camera(); 


Now that we have our Camera object, we're going to change how we draw our world's objects. On 
each tick of the timer, the first thing we're going to do is position cam, so that its viewing area is 
centered around Mario. Then, we are going to draw our world's objects RELATIVE TO cam's position. 
For example, if we have a platform with a top-left corner at (430, 160) (the platform's 

absolute coordinates in space), and the top-left corner of cam's viewing area is at (50, 100), we're 
going to start drawing that platform at (430 — 50, 160 — 100), or (380, 60) RELATIVE TO the top-left 
corner of the viewing area (the platform's relative coordinates or screen coordinates). Every pixel of 
that platform will be drawn relative to the top-left corner of the viewing area. 


First, we'll position our camera. Go to your Content Pane. java source file. Right before ... 


for (int i = 07 1 < WalkingMario.back obj] Ss.size()7 1 = 1 +1) 
WalkingMario.back objs.get(i).draw(g); 


... Insert the following line of code: 


WalkingMario.cam.setViewingArea(); 


We need to know the absolute coordinates of the top-left corner of our viewing area, before we can 
draw any of our world's objects relative to it. We won't change how we draw the background rectangle, 
because that only exists on the screen, rather than in our world's space. Same with our PAUSED and 
GAME OVER messages. However, our world contains Mario, Goombas, platforms, death zones, and 
background objects. Therefore, we'll need to change the draw methods of our Mario, Goomba, 
Platform, DeathZone, and BackgroundObject classes, so that they draw these objects using 
relative coordinates, rather than absolute ones. 


First, we'll change how we draw Mario, so go to your Mario. java source file. In our draw method, 
we currently pass the x- and y-coordinates of Mario's rectangle (my _rect.xandmy rect. y) to 
drawlImage. These are the absolute coordinates of Mario's top-left corner. We want the coordinates of 
Mario's top-left corner RELATIVE TO the top-left corner of our camera's viewing area, so before the if 
statement that begins with if (!dead), insert the following code: 


Rectangle viewing area = WalkingMario.cam.viewingArea()j; 
in scr 2 = My rect.® - viewing area. %; 
int scr _y = my rect.y - viewing area.y; 


scr xandscr_y contain the coordinates of Mario's top-left corner relative to the top-left corner of 
our camera's viewing area. To put it another way, they contain the screen coordinates of Mario's top-left 
corner. To draw Mario using relative coordinates, change every instance ofmy_ rect.x, in your 
draw method, to scr_x, and every instance ofmy rect.ytoscr_y. The body of your draw 
method should now look like: 


Rectangle viewing area = WalkingMario.cam.viewingArea(); 


int scr # = My rect.# —- viewing area. x; 
int scr y = my rect.y - viewing area.y; 
if (!dead) 


{ 
12 {racing Fight) 
g.drawImage (WalkingMario.mario img, scr _x, scr _y, 
Scr + +. hy rect.width, scr y + my fect. height, 

RIGHT FRAME SRC[frame].x, RIGHT FRAME SRC[frame].y, 
RIGHT FRAME SRC[frame] .x RIGHT FRAME SRC[frame] .width, 
RIGHT FRAME SRC[frame].y RIGHT FRAME SRC[frame] .height, 
null); 


else 
g.drawImage (WalkingMario.mario img, scr _x, scr _y, 
scr x + my rect.width, scr y + my rect.height, 
LEFT FRAME SRC[frame].x, LEFT FRAME SRC[frame].y, 
LEFT FRAME SRC[frame].x + LEFT FRAME SRC[frame].width, 
LEFT FRAME SRC[frame].y + LEFT FRAME SRC[frame].height, null); 
} 
else 
{ 
g.drawImage (WalkingMario.mario img, scr x, scr y, 
Scr x + my Fect.width, ser y 4+ my Pect.heignt; DEAD SRC.x, 
DEAD SRC.y, DEAD SRC.x + DEAD SRC.width, 
DEAD SRC.y + DEAD SRC.height, null); 


Now, we'll make similar changes to our Goomba class, so go to your Goomba. java source file. Go 
to your draw method. First, insert the following code before the if statement that begins with 
if (!dead): 


Rectangle viewing area = WalkingMario.cam.viewingArea (); 
int scr x = my rect.x —- viewing area.x; 
int scr y = my_rect.y - viewing area.y; 


Then, replace every instance ofmy rect. x, in the if statement, with scr_x, and every instance of 
my rect.y, inthe if statement, with scr_y. The body of your draw method should now look like: 


Rectangle viewing area = WalkingMario.cam.viewingArea(); 
int scr x = my rect.x% — Viewing area. x; 
int scr y = my rect.y — viewing areasy; 


if (!dead) 
{ 
g.drawImage (WalkingMario.enemies img, scr_x, scr_y, 
scr x + my Yect.widlh, scr y + my rect.neight, 
FRAME SRC[frame].x, FRAME SRC[frame].y, 
FRAME SRC[frame].x + FRAME SRC[frame].width, 
FRAME SRC[frame].y + FRAME SRC[frame].height, null); 


} 
else 
{ 
g.drawImage (WalkingMario.enemies img, scr_x, scr_y, 
scr x + my_rect.width, scr_y + my_rect.height, DEAD SRC.x, 
DEAD SRC.y, DEAD SRC.x + DEAD SRC.width, 
DEAD SRC.y + DEAD SRC.height, null); 


The next class that we'll change is Plat form, so go to your Platform. java source file. Change 
the body of your draw method, so that it looks like: 


Rectangle viewing area = WalkingMario.cam.viewingArea(); 
int scr x = My rect.x - viewing area.x; 
int scr y = my _rect.y - viewing area.y; 


O.selColor(my color); 
g.fillRect (scr x, scr y, my rect.width, my rect.height) ; 


Since we draw platforms and death zones in the exact same way, you can copy the above code from 
your Platform class to your DeathZone class. Finally, we'll change how we draw background 
objects. Go to your BackgroundObject. java source file. Change the body of the draw method 
of your BackgroundObject class, so that it looks like: 


Rectangle viewing area = WalkingMario.cam.viewingArea ()j; 
int scr x = my rect.x - viewing area.x; 
int scr y = my rect.y — viewing area.y; 


g.drawImage(src_img, scr x, scr_y, scr x + my rect.width, 
scr y + my rect.height, src rect.x, src Frect.y, 
Sie recl.s +-Sre rect. width, sre rect.y - sre: rect .helgnt, mill): 


Run your program. Now, as Mario moves, you should be able to see different parts of the world. If you 
are down low, you should be able to see the big, red abyss sitting ominously below the black platform. 
If you are up high, you shouldn't be able to see things that are far below you in the world, such as the 
abyss and black platform. You should now be able to see the blue "walls" that keep the Goombas from 
falling into the abyss. If Mario stops moving, no scrolling will take place. 


Let's add a few more platforms to the world, so that we can see some more horizontal and vertical 
scrolling. Go to your WalkingMario. java source file. Add two more platforms to the world, with 
the following code (put it where you create the rest of the world's platforms): 


plats.add(new Platform(new Rectangle(500, 290, 500, 10), 

Color.YELLOW) ) 

plats.add(new Platform(new Rectangle(600, 170, 300, 10), 
Color.GREEN) ); 
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Run your program again. The new yellow and green platforms should sit, invitingly, to the right of the 
platforms we had before. It's like we just opened up a new frontier, in our world! 


If Mario goes near the bottom of our world, nearly half of the screen is taken up by the abyss. What if 
we could stop the camera from going down so far, when Mario was near the bottom of the world, to 
keep the screen from being dominated by a ginormous, red abyss? Many games that scroll stop the 
camera from looking at places that are beyond the designated "edges" of the world. We can place a 
bounding rectangle around our camera's viewing area, so that the camera stops moving in that 
direction, when it reaches an "edge" of our world. This will keep the screen from being swallowed up 
by a sea of red. 


First, go to your Camera. java source file. Add the following member variable to your Camera 
class: 


private Rectangle my bounds; 


We'll use my bounds to specify a bounding rectangle: where are the boundaries of our world? Our 
camera's viewing area will be confined to this bounding rectangle. When Mario is near one or more 
edges of our world, he won't be in the center of our camera's viewing area. Let's say he's approaching 
the left edge of our world. If he's far enough away from it, he'll be in the center of our camera's viewing 
area. If he gets close enough, the camera's viewing area will stop moving to the left, in absolute space, 
since it will have reached the left edge of the world. Since Mario will still be moving to the left, in 
absolute space, he'll get drawn closer and closer to the left side of the viewing area. If there is no wall 
at the left edge of the world, to stop his leftward movement, he'll eventually move off the left side of 
the screen. 


If Mario then moves to the right, he'll eventually reappear on the screen. If he keeps moving to the 
right, he'll get drawn closer and closer to the right side of the viewing area, until he moves far enough 
to the right that the camera's viewing area will be repositioned to center around him. If he keeps 
moving to the right, he'll remain in the center of the viewing area, until he approaches the right edge of 
the world. Then, the camera's viewing area will stop moving to the right, in absolute space, since it will 
have reached the right edge of the world. Since Mario will still be moving to the right, in absolute 
space, he'll get drawn closer and closer to the right side of the viewing area. If there is no wall at the 
right edge of the world, to stop his rightward movement, he'll eventually move off the right side of the 
screen. 


Let's give our world a bounding rectangle, by adding the following line of code to the constructor of 
our Camera class: 


my bounds = new Rectangle(-100, -1000, 10100, 1500); 


The x-coordinate of the left edge of our world will be —100. Our world will be 10,100 pixels wide. 
Therefore, the x-coordinate of the right edge of our world will be 9,999 (100 + 10,100 — 1). The y- 
coordinate of the top edge of our world will be —1,000. Our world will be 1,500 pixels high. Therefore, 
the y-coordinate of the bottom edge of our world will be 499 (—1,000 + 1,500 — 1). 


To position our viewing area, we set the coordinates of its top-left corner. The width and height of our 
viewing area will always remain the same, so we won't need to touch those. To keep our viewing area 
inside of our bounding rectangle, we'll need to constrain the location of its top-left corner, so that: 


° The left edge of the viewing area is never to the left of the left edge of the bounding rectangle. 

* The right edge of the viewing area (automatically determined by where the left edge is, given 
our viewing area's constant width) is never to the right of the right edge of the bounding 
rectangle. 

¢ The top of the viewing area is never above the top of the bounding rectangle. 

¢ The bottom of the viewing area (automatically determined by where the top is, given our 
viewing area's constant height) is never below the bottom of the bounding rectangle. 


After we center our viewing area around Mario, we'll adjust the coordinates of its top-left corner, so 
that the viewing area remains within the bounding rectangle. We'll add a method to our Range class 
(remember that one?) that will bound (constrain) a number to a range. It will use the following 
algorithm: 


¢ We'll call our number n, the lower bound of our range LZ, and the upper bound of our range U. 

* Our method will return one of the three values above, depending on the value of n. 

¢ If is lower than L, the method will return LZ, since we can't go any lower than L. 

* Ifmis higher than U (which must be greater than or equal to L), the method will return U, since 
we can't go any higher than U. 

¢ Else, the method will return n, since n is within our range. 


Now, let's implement this simple algorithm. Go to your Range. java source file. Add the following 
method to your Range class: 


public int bound(int n) 
{ 
if (n < lower bound) 
return lower bound; 
elee if (n > upper bound) 
return upper bound; 
else 
re 


A 


CUFrM Ny; 


} 


Test the above algorithm for all three of its cases ("distinct possible situations" for the input to be 
in): a number lower than the lower bound of the range (the if block), a number higher than the 
upper bound of the range (the else if block), and a number within the range (the else 
block). 


Go back to your Camera. java source file. We're going to enhance our set ViewingArea method, 
so that after we center our viewing area around Mario, we bound it to our bounding rectangle. Insert the 
following code at the end of your set ViewingArea method: 


Range tlx bounds = new Range(my bounds.x, 

my bounds.x + my bounds.width - my view.width); 
Range tly bounds = new Range(my bounds.y, 

my bounds.y + my bounds.height - my view.height) ; 


my view.x = 
my view.y = 


1x bounds.bound(my view.x); 
ly bounds.bound(my view.y); 
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First, we'll get the range of acceptable x-coordinates for the top-left corner of our viewing area. 
Naturally, we'll store this range in a Range object. They range from the left side of our bounding 
rectangle (my bounds. x) to one screen width (my _view.width) minus one pixel to the left of the 
right side of our bounding rectangle. The x-coordinate of the right side of our bounding rectangle is 

my bounds.x + my _bounds.width - 1. One screen width minus one pixel to the left of that 
is (ny bounds.x + my bounds.width - 1) - (my _view.width - 1). That 
expression can be simplified tomy bounds.x + my bounds.width - my view.width. 


Then, we'll get the range of acceptable y-coordinates for the top-left corner of our viewing area. We'll 
use another Range object to store this range. They range from the top of our bounding rectangle 

(my bounds. y) to one screen height (ny view.height) minus one pixel above the bottom of our 
bounding rectangle. Finally, we'll bound each coordinate of the top-left corner of our viewing area to 
the appropriate range, by calling the bound method of each of our Range objects. 


Run your program. If Mario is close enough to the left or bottom edges of the world, the screen 
shouldn't scroll any more, in those directions. Can you make Mario move off the screen? If you are 
near the bottom of the world, the abyss should no longer dominate the screen. Try making more 
platforms, to make a bigger world for Mario to explore. Also, to give Mario a challenge, add some 
more Goombas and death zones to other parts of the world. 


